<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script  src="node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="app">
  <h1>vue-axios插件</h1>
  <a href="javascript:;" @click="get">get请求</a>
  <span>{{msg}}</span>
  <a href="javascript:;" @click="post">post请求</a>
  <a href="javascript:;" @click="http">http请求</a>
</div>
<script>
  new Vue({
    el: '#app',
    data:{
      msg: ''
    },
    http:{
      // 设置公共路径
      root:"http://localhost:63342/immocmall"
    },
    mounted(){
      //设置拦截器
      axios.interceptors.request.use(config => {
        console.log('request init')
        return config;
      });
      axios.interceptors.response.use(response => {
//        console.log('response init')
        return response
      })
    },
    methods:{
      get(){
        axios.get('package.json', {
          params: {
            userId: "999"
          },
          headers: {
            token: "123"
          }
        }).then(res => {
          this.msg = res.data;
        })
      },

      post(){
        axios.post("package.json",{
          userId: '123'
        },{
          headers: {
            token: "tom"
          }
          }
        ).then(res => {
          this.msg = res.data;
        }).catch( error => {

        })
      },
      http(){
        axios({
          url: 'package.json',
          method: 'post',
          data: {
            userId: "123"
          },
          params: {
            userId: "111"
          },
          headers: {
            token: '123'
          }
        }).then( res => {
          this.msg = res.data;
        })
      }
    }
  })
</script>
</body>
</html>
